<!DOCTYPE html>
<html lane="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>爱涂说ß</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<link rel="stylesheet" href="../static/css/pane.css">
	<link rel="stylesheet" href="../static/css/flick/jquery-ui-1.8.23.custom.css">
	<!-- <link type="text/css" rel="stylesheet" href="../static/css/layout-default-latest.css" /> -->
	<link type="text/css" rel="stylesheet" href="../static/css/tinybox.css" />
	<!-- <link type="text/css" rel="stylesheet" href="../static/css/bootstrap.css" /> -->

	<script type="text/javascript" src="../static/js/raphael-min.js"></script>
	<script type="text/javascript" src="../static/js/jquery.js"></script>
	<script type="text/javascript" src="../static/js/jquery-ui-1.8.23.custom.min.js"></script>
	<!-- // <script type="text/javascript" src="../static/js/jquery.layout-latest.js"></script> -->
	<script type="text/javascript" src="../static/js/jquery.mousewheel.js"></script>
	<!-- // <script type="text/javascript" src="../static/js/scale.raphael.js"></script> -->
	<script type="text/javascript" src="../static/js/tinybox.js"></script>
	<!-- // <script type="text/javascript" src="../static/js/bootstrap-modal.js"></script> -->
	<!-- // <script type="text/javascript" src="../static/js/hammer.js"></script> -->
	<!-- // <script type="text/javascript" src="../static/js/jquery.hammer.js"></script> -->
	<!-- // <script type="text/javascript" src="../static/js/jquery.BetterGrow.js"></script> -->
	<script type="text/javascript" src="../static/js/rgbcolor.js"></script>
	<!-- // <script type="text/javascript" src="../static/js/jquery.qtip-1.0.0-rc3.js"></script> -->
	<script type="text/javascript" src="../static/js/canvg.js"></script>
</head>
<body onselectstart="return false;">
	<div id="container">
			<div id="pane_wrapper">
				<div id="pane">
					<div id="svg_wrapper"></div>
					<div id="trash_can_wrapper">
						<img src="../static/img/trash_can_100.png" alt="垃圾箱" id="trash_can">
					</div>
				</div>
				<div id="info_container">
					<div id="control_pane">
						<h3>{{ title }}</h3>
						<a class="btn" id="invite">邀请</a>
						<a class="btn" id="finish">结束</a>
					</div>
					<div id="info_tabs" class="tabs">
						<ul>
							<li><a href="#online">在线</a></li>
							<li><a href="#chat">聊天</a></li>
						</ul>
						<div id="online">
							<div id="online_list"></div>
						</div>
						<div id="chat">
							<div id="chat_list"></div>
							<input type="text" id="chat_input">
						</div>
					</div>
				</div>
			</div>
			<div id="toolbar_wrapper">
				<ul id="toolbar">
					<li><a id="pen_tool"><img src="../static/img/pencil_24.png" alt="铅笔"></a></li>
					<li><a id="line_tool"><img src="../static/img/line_24.png" alt="直线"></a>
						<ul class="dropdown">
							<li><a id="onewayArrow_tool"><img src="../static/img/oneway_arrow_24.png" alt="单向箭头"></a></li>
							<li><a id="twowayArrow_tool"><img src="../static/img/twoway_arrow_24.png" alt="双向箭头"></a></li>
						</ul>
					</li>
					<li><a id="rect_tool"><img src="../static/img/rect_24.png" alt="空心矩形"></a>
						<ul class="dropdown">
							<li><a id="rectFilled_tool"><img src="../static/img/rect_filled_24.png" alt="实心矩形"></a></li>
						</ul>
					</li>
					<li><a id="ellipse_tool"><img src="../static/img/circle_24.png" alt="空心圆形"></a>
						<ul class="dropdown">
							<li><a id="ellipseFilled_tool"><img src="../static/img/circle_filled_24.png" alt="实心圆形"></a></li>
						</ul>
					</li>
					<li><a id="color"><img src="../static/img/color_24.png" alt="选择颜色"></a>
						<ul class="dropdown">
							<li><a id="color_000000" style="color:#000000"> ▄▄ </a></li>
							<li><a id="color_CC3333" style="color:#CC3333"> ▄▄ </a></li>
							<li><a id="color_3333CC" style="color:#3333CC"> ▄▄ </a></li>
							<li><a id="color_33CC33" style="color:#33CC33"> ▄▄ </a></li>
							<li><a id="color_11CCCC" style="color:#11CCCC"> ▄▄ </a></li>
							<li><a id="color_EEEE11" style="color:#EEEE11"> ▄▄ </a></li>
							<li><a id="color_FFFFFF" style="color:#FFFFFF"> ▄▄ </a></li>
						</ul>
					</li>
					<li><a id="text_tool"><img src="../static/img/text_24.png" alt="插入文字"></a></li>
					<li><a id="stroke"><img src="../static/img/stroke_24.png" alt="笔划粗细"></a>
						<ul class="dropdown">
							<li><a id="stroke_1"><img src="../static/img/stroke1_24.png" alt="1px"></a></li>
							<li><a id="stroke_3"><img src="../static/img/stroke3_24.png" alt="3px"></a></li>
							<li><a id="stroke_5"><img src="../static/img/stroke5_24.png" alt="5px"></a></li>
							<li><a id="stroke_10"><img src="../static/img/stroke10_24.png" alt="10px"></a></li>
						</ul>
					</li>
					<li><a id="undo"><img src="../static/img/undo_24.png" alt="撤销"></a></li>
					<li><a id="redo"><img src="../static/img/redo_24.png" alt="重做"></a></li>
					<li><a id="hand_tool"><img src="../static/img/hand_24.png" alt="选择"></a></li>
				</ul>
			</div>
	</div>

	<div class="modal" id="insertTextModal">
		<!--<h3>插入文字</h3>-->
		<p>
			<!--<input type="textarae" id="insertText">-->
			<textarea id="insertText" name="content"></textarea>
		</p>
		<!--<a class="inModal submit" id="insertTextSubmit">确定</a>-->
		<!--<a class="inModal cancel" id="insertTextCancel">取消</a>-->
	</div>
	<div class="modal" id="finishChatModal">
		<h3>确定要退出吗？</h3>
		<a class="inModal submit" id="finishChatSubmit">是</a>
		<a class="inModal cancel" id="finishChatCancel">否</a>
	</div>
	<div class="modal" id="cleanupModal">
		<h3>确定要清空画布吗？</h3>
		<a class="inModal submit" id="cleanupSubmit">是</a>
		<a class="inModal cancel" id="cleanupCancel">否</a>
	</div>
	<!--<div class="modal" id="inputNicknameModal">-->
		<!--<h3>输入用户名</h3>-->
		<!--<input type="text" id="nicknameText"/>-->
		<!--<a class="inModal submit" id="inputNicknameSubmit">确定</a>-->
	<!--</div>-->
	<canvas id="convert_canvas" width="1000px" height="600px" style="display:none"></canvas> 
	<form action="/upload/" id="upload_form">
		<input type="hidden" name="sessionid" value="{{ sessionid }}" >
		{{ xsrf_form_html() }}
	</form>
	<form action="/share/" id="shareForm" style="display:none;" method="post">
		<input type="hidden" name="type" value="{{ type }}" >
		<input type="hidden" name="sessionid" value="{{ sessionid }}">
		<input type="hidden" name="cover" id="shareForm_cover">
		<input type="hidden" name="title" value="{{ title }}">
		{{ xsrf_form_html() }}
	</form>

<script type="text/javascript" src="../static/js/sketch.js"></script>
<script type="text/javascript">
	var sessionid = "{{ sessionid }}"
	var type = "{{ type }}"
	var past_animation = '{{ past_animation }}'
	var hasclosed = {{ hasclosed }}
	var nickname = "{{ nickname }}"
</script>
</body>


</html>
